<template>
  <div>
      <h1>当前的和为: {{sum}}</h1>
      <h3>当前值放大10倍后为：{{bigSum}}</h3>
      <h3>我在{{school}} , 学习{{subject}}</h3>
      <h2>Person组件的人员列表有：{{personList.length}}人</h2>
      <select v-model.number="n">
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
      </select>
      <button class="a" @click="increment(n)">+</button>
      <button class="a" @click="decrement(n)">-</button>
      <button @click="incrementOdd(n)">当前和为奇数时再加</button>
      <button @click="incrementWait(n)">等0.6秒再加</button>
      <br>
  </div>
</template>

<script>
import {mapState,mapGetters, mapMutations, mapActions} from 'vuex'
export default {
    name:'Count',
    data(){
        return{
            n:1,
        }
    },
    computed:{
        ...mapState(['sum','school','subject','personList']), 
        ...mapGetters(['bigSum'])
    },
    methods: {
        ...mapMutations({increment:'ADD',decrement:'JIAN'}),
        ...mapActions({incrementOdd:'ji',incrementWait:'wait'})
    },
}
</script>

<style>
.a{
    width: 50px;
}
button {
    margin-left: 5px;
}
</style>